<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
           p, 
            ul {
                border: 2px solid rebeccapurple;
            }

            span,
            li {
                border: 2px solid blue;
            }

            ul {
                display: flex;
                list-style: none;
                padding: 0;
            } 

            .inline {
                display: inline;
            }
        </style>
    </head>
    <body>
        <!-- <p>
            I am a paragraph. Some of the
            <span>words</span> have been wrapped in a
            <span>span element</span>.
        </p>     
        <ul>
          <li>Item One</li>
          <li>Item Two</li>
          <li>Item Three</li>
        </ul>
        <p class="inline">I am a paragraph. A short one.</p>
        <p class="inline">I am another paragraph. Also a short one.</p> -->
        <!-- 图片 -->
        <div style="width: 150px; height: 150px;border: 1px solid blueviolet; background-color: orange;">
            <img src="./pic/1.png" style="height: 100%; width: 100%; object-fit: none;">
        </div>
    </body>
</html>